<template>
	<view class="modular">
		<view class="headerBox">
			<view class="header">
				<view class="information">
					<view>
						<view><text>会员</text>：{{data.userName}} </view>
						<view><text>填写日期</text>：{{data.fillFormDate}}</view>
					</view>
					<view>
						<view><text>性别</text>：{{userInfo.sex && userInfo.sex == 1 ? '男' : '女' || ''}} </view>
						<view><text>年龄</text>：{{userInfo.age}}</view>
					</view>
					<view>
						<view><text>评估人</text>：{{data.healthName}}</view>
						<view><text>评估日期</text>：{{data.modifiedDate ? data.modifiedDate : data.createdDate}}</view>
					</view>
				</view>
			</view>
			
			<view class="connectBox" v-show="!searchBarFixed">
				<image src="@/static/img/healthStatus/connect@2x.png"></image>
				<image src="@/static/img/healthStatus/connect@2x.png"></image>
			</view>
		</view>
		<view class="mainContent">
			<view class="specific">
				<image src="@/static/img/healthStatus/screen.png" class="title"></image>
				<view>
					<view class="single"  v-for="(item,index) in psychologyQuestion" :key="index" v-if="index <= 3">
						<image src="@/static/img/healthStatus/questionIcon@2x.png"></image>
						<view>
							<view class="question">{{item.name}}</view>
							<view class="answer">
								{{answer[index] && answer[index].userOption? item.adTopicsRepliesEntityList.filter((a)=>{
									return a.elections == answer[index].userOption})[0].value:'未选择'
								}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="questionDetail">
			<view class="specific">			
				<image src="@/static/img/healthStatus/questionnarDetail.png" class="title"></image>
				<view class="limit">在过去的两周内，有多少时候您受到以下问题困扰</view>
				<view>
					<view class="single" v-for="(item,index) in psychologyQuestion" :key="index" v-if="index > 3">
						<image src="@/static/img/healthStatus/questionIcon@2x.png"></image>
						<view>
							<view class="question">{{item.name}}</view>
							<view class="answer">
								{{answer[index] && answer[index].userOption? item.adTopicsRepliesEntityList.filter((a)=>{
									return a.elections == answer[index].userOption})[0].value:'未选择'
								}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {age,distance} from '@/static/js/filter.js'
	export default{
		data() {
			return {
				psychologyQuestion:[],
				data:{},
				answer: [],
				userInfo: {},
				searchBarFixed: false
			}
		},
		onLoad(option) {
			if(option.id) {
				this.question().then((reponse) => {
					this.$api.healthAssessmentDetails(option.id).then((res) => {
						if(res.data.returnCode == 200) {
							this.data = res.data.result.newAppMentalHealthAssessmentEntity;
							this.answer = res.data.result.newUserTopicsEntities.map((a)=>{
								if(!a.userOption && a.userValue){
									a.userOption = a.userValue == '是'?'A':'B'
								}
								return a;
							})
							this.$api.findByUserId(option.userId).then((res) => {
								if(res.data.returnCode == 200) {
									this.userInfo = res.data && res.data.result
								}
							})
						}
					})
				})
			}
		},
		onPageScroll() {
			this.searchBarFixed = this.distance('mainContent');
		},
		methods:{
			age,
			distance,
			question() {
				return new Promise((success,error)=>{
					this.$api.findByTopicsType('ids=27&ids=29').then((res)=>{
						if(res){
							const aArr = res.data.result[27] && res.data.result[27].adTopicsRepliesEntityList.map((a)=>{
								a.adTopicsRepliesEntityList = a.adTopicsRepliesEntityList.map((b)=>{b.checked = false;return b})
								return a
							})
							const bArr = res.data.result[29] && res.data.result[29].adTopicsRepliesEntityList.map((a)=>{
								a.adTopicsRepliesEntityList = a.adTopicsRepliesEntityList.map((b)=>{b.checked = false;return b})
								return a
							})
							this.psychologyQuestion = aArr.concat(bArr)
							success(res.data.result)
						}else{
							error('')
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/quickly/healthStatus/toView.scss';
</style>
